<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="版本列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-input title="版本号" :up-table="true" name="versionNo"></form-input>
                        <form-select title="版本类别" :up-table="true" name="versionType" :options='versionType'></form-select>

                        <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                        <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <modal-container title="编辑" v-el:modal v-ref:modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:mform>
                <div class="modal-body">
                    <table-modal :item="item" :columns-set="columnsSet" v-ref:item></table-modal>
                </div>

                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                    <v-button theme="primary" type="submit">保存</v-button>
                </div>
            </form>

        </modal-container>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn+.btn {
        margin-right:10px;
    }
    .form-inline .form-group+.form-group {
        margin-left: 20px;
    }
</style>
<script>
    import {dateTime, createDataTable} from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"

    var dataTable;
    var columnsSet;
    export default {
        data:() => ({
            item: {},
            columnsSet: [],
            versionType:[
                {key:"所有类别",value:""},
                {key: "android", value: "android"},
                {key: "ios", value: "ios"},
            ]
        }),
        methods: {
            //还原弹出框位置
            resetBindDrag(){
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            }
        },
        created(){
            columnsSet = [
                {
                    title:"版本号",
                    data:"versionNo",
                    readonly:true,
                    edit:true,
                    className: "operate"
                },
                {
                    title: "版本类别",
                    data: "versionType",
                    edit:true,
                    readonly:true,
                    className: "operate",
//                    options:[
//                        {key: "android", value: "android"},
//                        {key: "ios", value: "ios"},
//                    ]
                },
                {
                    title: "是否强制更新",
                    data:"forced",
                    className: "operate",
                    options:[
                        {key: "是", value: "y"},
                        {key: "否", value: "n"}
                    ],
                    render: function(data) {
                        return (data == "y") ? "是" : "否"
                    }
                },
                {
                    title: "更新链接",
                    data:"linkUrl",
                    edit:true,
                    className: "operate"
                },
                {
                    title: "操作员号",
                    data:"oprId",
                    className: "operate"
                },
                {
                    title: "操作员姓名",
                    data:"oprName",
                    className: "operate"
                },
//                {
//                    title: "更新时间",
//                    data:"updTime",
//                    className: "operate",
//                    render:function(data){
//                        return dateFormat(data)
//                    }
//                },
                {
                    title: "最后修改时间",
                    data:"lastTime",
                    className: "operate",
                    render:function(data){
                        return dateFormat(data)
                    }
                },
                {
                    title: "相关操作",
                    className: "operate",
                    width:"160px",
                    render: function(value, type, row) {
                        return `
                        <button type="button" class="btn btn-primary btn-sm edit">编辑</button>
                        <button type="button" class="btn btn-danger btn-sm delete">删除</button>
                    `
                    }
                }
            ]
        },
        ready:async function () {
            var resultWatch = function () {
            };
            dateTime({format:"yyyy-mm-dd",startDate:"", minView:"2"})
            this.$set("columnsSet",columnsSet)
            var self = this;
//            dataTable = createDataTable({
//                config:{
//                    table:this.$els.table,
//                    columns:this.columnsSet
//                },
//                send:{
//                    url:"/api/v1" + projectName_Url + "/plat/release/getReleaseList",
//                    searchData:{ versionNo :"versionNo ",versionType :"versionType "}
//                },
//                receive:{
//                    list:"list",
//                    total: "total"
//                }
//            })
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function(data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //发送请求
                    var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/release/getReleaseList",
                        data:_data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.list || []
                    })
                }
            });

            $(self.$el).on("click",".edit",function() {
                var Row = $(this).closest('tr').get(0);
                const dataArray = _.cloneDeep(dataTable.row(Row).data());
                self.item = dataArray;
                //编辑框验证、保存、提交
                $(self.$els.mform).validate(self.item.valdate = {
                    async submitHandler() {
                        var form = self.$els.mform;
                        var _data = serialize(form, { hash: true, disabled:true, empty:true });
                        var oprName = JSON.parse(localStorage.getItem("id_token")).usrName;
                        var oprId = JSON.parse(localStorage.getItem("id_token")).oprId;
                        _data.oprName = oprName;
                        _data.oprId = oprId;
                        var result = await self.$post({
                            url: "/api/v1" + projectName_Url + "/plat/release/putRelease",
                            data: _data
                        });
                        Midway.alert({title:"操作成功",content:"操作成功"})
                        dataTable.ajax.reload(null,false);
                        $(self.$els.modal).modal('hide');
                        self.resetBindDrag()
                    },
                    rules:{
                        versionNo :{
                            required:true,
                            version:true,
                            maxlength:16
                        },
                        versionType :{
                            required: true
                        },
                        linkUrl:{
                            required: true,
                            url:true,
                            maxlength:64
                        },
                        forced:{
                            required: true
                        }
                    },
                    messages: {

                    }
                });
                $(self.$els.modal).modal('show');
            });

            $(self.$el).on("click",".delete",async function() {
                var Row = $(this).closest('tr').get(0);
                var versionNo = dataTable.row(Row).data().versionNo;
                var type = dataTable.row(Row).data().versionType;

                await Midway.confirm({
                    title: "删除项目",
                    content: "是否要删除版本:" + versionNo + "?"
                })
                var result = await self.$post({
                    url: "/api/v1" + projectName_Url + "/plat/release/"+ versionNo + '/'+ type,
                    method: "DELETE"
                });
                Midway.alert({title:"删除成功",content:"删除成功"})
                dataTable.ajax.reload();
            });
        },
        beforeDestroy(){
            $(this.$el).off("click")
        }
    }
</script>
